<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table align="center" cellpadding="10" cellspacing="3">
    <tr>
        <td>姓名:<input type="text" id="username"/></td>
        <td>Email:<input type="text" id="email"/></td>
        <td>年龄:<input type="text" id="age"/></td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td>
    </tr>
</table>
<table id="tabInfo" align="center" width="500" border="1">
    <tr>
        <td>姓名</td>
        <td>Email</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
</table>
</body>
<script>
  function addTR() {
    //1. 取三个文本框的值
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var age = document.getElementById("age").value;
    //2. 找表格
    var tabNode = document.getElementById("tabInfo");
    //3. 产生一个新的tr，td
    var trNode = tabNode.insertRow();
    var usernameTdNode = trNode.insertCell(0);
    usernameTdNode.innerHTML = username;
    var emailTdNode = trNode.insertCell(1);
    emailTdNode.innerHTML = email;
    var ageTdNode = trNode.insertCell(2);
    ageTdNode.innerHTML = age;
    var opTdNode = trNode.insertCell(3);
    opTdNode.innerHTML="<input type='button' value='删除' onclick=\"deleteTR(this)\"/>";
  }

  function deleteTR(inputParameters) {
    var trNode = inputParameters.parentNode.parentNode;
    //找表格
    var tabNode = document.getElementById("tabInfo");
    //找索引，再删除
    var trNo = trNode.rowIndex;
    tabNode.deleteRow(trNo);
  }
</script>
</html>